<template>
  <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
    <umrp-breadcrumb :items="['活动管理', '活动列表']"></umrp-breadcrumb>
    <umrp-card>
      <umrp-row :gutter="16">
        <umrp-col :span="6">
          <umrp-form-item label="活动名称">
            <umrp-input></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-form-item label="活动类型">
            <umrp-select>
              <umrp-option>全部</umrp-option>
              <umrp-option>H5活动页面</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-form-item label="活动状态">
            <umrp-select>
              <umrp-option>全部</umrp-option>
              <umrp-option>未开始</umrp-option>
              <umrp-option>进行中</umrp-option>
              <umrp-option>已结束</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-space :size="10">
            <umrp-button type="primary">搜索</umrp-button>
            <umrp-button type="primary">导出表格</umrp-button>
          </umrp-space>
        </umrp-col>
      </umrp-row>
    </umrp-card>
    <umrp-card>
      <umrp-list>
        <umrp-list-item v-for="_ in [1, 2, 3]">
          <umrp-row>
            <umrp-col :span="10">
              <umrp-space :size="16">
                <umrp-image :width="150" :height="150"></umrp-image>
                <umrp-space direction="vertical" :size="16">
                  <umrp-text :size="16">五一特惠，5.1元开抢体验课，火热报名中！</umrp-text>
                  <umrp-space :size="16" align="center">
                    <umrp-label>进行中</umrp-label>
                    <umrp-text :size="14">2025-05-02 00:00 到 2025-05-09 00:00</umrp-text>
                  </umrp-space>
                  <umrp-label>H5活动页面</umrp-label>
                </umrp-space>
              </umrp-space>
            </umrp-col>
            <umrp-col :span="8">
              <umrp-grid :cols="4" :col-gap="10" :row-gap="10">
                <umrp-grid-item>
                  <umrp-statistic title="浏览人数" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="分享人数" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="付款人数" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="支付总额" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="分佣金额" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="实收总额" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="满团数" value="999"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                  <umrp-statistic title="成团数" value="999"></umrp-statistic>
                </umrp-grid-item>
              </umrp-grid>
            </umrp-col>
            <umrp-col :span="6">
              <umrp-space direction="vertical" align="end">
                <umrp-space direction="vertical" :size="16">
                  <umrp-button type="primary" v-route="'ActivityCustomer'">报名表</umrp-button>
                  <umrp-space :size="16">
                    <umrp-button type="primary" outline v-route="'XiaolankaAdminActivityEditor'">编辑</umrp-button>
                    <umrp-button type="primary" outline>查看</umrp-button>
                    <umrp-button type="primary" outline v-route="'XiaolankaAdminActivityEditor'">复制</umrp-button>
                  </umrp-space>
                  <umrp-space :size="16">
                    <umrp-button type="primary" outline v-route="'DataScreen'">数据大屏</umrp-button>
                    <umrp-button type="primary" outline>员工数据</umrp-button>
                    <umrp-button type="primary" outline>删除</umrp-button>
                  </umrp-space>
                  <umrp-space :size="16">
                    <umrp-button type="primary" outline v-route="'DataScreen'">活动流程</umrp-button>
                    <umrp-button type="primary" outline v-route="'ActivityDataEarlyWarning'">数据预警</umrp-button>
                  </umrp-space>
                </umrp-space>
              </umrp-space>
            </umrp-col>
          </umrp-row>
        </umrp-list-item>
      </umrp-list>
      <umrp-container direction="horizontal" justify="end">
        <umrp-pagination></umrp-pagination>
      </umrp-container>
    </umrp-card>
  </umrp-container>
</template>